<template>
 <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item style="float: right;">
            <el-input v-model="cplate" placeholder="请输入要搜索的车牌号" @input="selectByCplate(1);" style="width: 300px">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div style="margin-top: 20px" @change="selectByCplate(1)">
              <el-radio-group v-model="cstate">
                <el-radio value="1" border>出租中</el-radio>
                <el-radio value="2" border>未出租</el-radio>
                <el-radio value="" border>所有车</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="cid" label="ID" />
          <el-table-column prop="models.mname" label="车型名称" />
          <el-table-column prop="cplate" label="车牌号" />
          <el-table-column prop="cstate" label="租车状态">
            <template #default="scope">
              <span v-if="scope.row.cstate == 1">
                <el-tag type="primary">出租中</el-tag></span>
              <span v-else> <el-tag type="info">未出租</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column prop="brand" label="品牌" />
          <el-table-column prop="eavatar" label="头像">
            <template #default="scope">
              <el-avatar shape="square" :size="50" :src="'http://localhost:8080/upload/' + scope.row.eavatar" />
            </template>
          </el-table-column>
          <el-table-column prop="pirce" label="价格" />
          <el-table-column label="操作">

            <template #default="scope">
              <span v-if="scope.row.cstate == 1">已出租</span>
              <span v-else>
                 <el-button size="small" type="primary" @click="selectByCid(scope.row.cid)">租车</el-button>
              </span>
             
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination background layout="prev, pager, next" v-model:current-page="pageInfo.pageNum"
            v-model:page-count="pageInfo.pages" @updare:current-page="selectByCplate" />
        </el-row>

      </el-card>
    </el-col>
  </el-row>

  <!-- 修改模态框开始 -->
  <el-dialog v-model="carsUpdateDialogShow" title="出租车辆" width="500px">
    <el-form-item label="车型" lable-width="20%">
      <el-select v-model="carsUpdate.mid" placeholder="车型" style="width: 300px">
        <el-option v-for="(models, index) in modelsList" :key="index" :label="models.mname" :value="models.mid" disabled="ture" />
      </el-select>
    </el-form-item>
    <el-form>
      <el-form-item label="车牌号" lable-width="20%">
        <el-input v-model="carsUpdate.cplate" autocomplete="off"disabled="ture" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="品牌" lable-width="20%">
        <el-input v-model="carsUpdate.brand" autocomplete="off" disabled="ture"/>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="租一天的价格" lable-width="20%">
        <el-input v-model="carsUpdate.pirce" autocomplete="off" disabled="ture"/>
      </el-form-item>
    </el-form>
    <el-form-item label="车照" lable-width="20%">
     
        <el-avatar shape="square" :size="50" :src="'http://localhost:8080/upload/' +carsUpdate.eavatar" class="avatar" />
      <!-- <el-upload class="avatar-uploader" action="http://localhost:8080/admin/upload" name="pic" :headers="headers"
        :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess1">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload> -->
    </el-form-item>
    <template #footer>
      <el-form>
      <el-form-item label="租几天" lable-width="20%">
        <el-input v-model="days" autocomplete="off" />
      </el-form-item>
    </el-form>
      <div class="dialog-footer">
        <el-button @click="carsUpdateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  
      </template>
      
      
      <script setup>
      import { Search } from '@element-plus/icons-vue'
      import modelsApi from '@/api/modelsApi';
      import carsApi from '@/api/carsApi';
      import { DynamicSizeGrid, ElMessage } from 'element-plus';
      import { computed, reactive, ref } from 'vue';
      import { ElLoading } from 'element-plus'
      import { useTokenStore } from '@/stores/token';
import ordersApi from '@/api/ordersApi';
import adminApi from '@/api/adminApi';
      const tokenStore = useTokenStore();
      
      const headers = computed(() => {
        let token = tokenStore.tokenStr;
        return {
          token
        }
      
      
      });
      
      //修改框
      const carsUpdateDialogShow = ref(false);
      //所有车型的·
      const modelsList = ref([]);
      //用来搜索的关键字
      const cplate = ref('');
      const cstate = ref('');
      const pageInfo = ref({
        pages: 0,
        pageSize: 0,
        pageNum: 0
      });
      //被修改部门的信息
      const carsUpdate = ref({
        cid: '',
        mid: '',
        cplate: '',
        brand: '',
        eavatar: '',
        pirce: '',
      });
      //租的天数
      const days=ref('');
      //上传图片的地址
      const id =ref('');

    
      //查询车型并添加到对话框
      function ShowAddDialog() {
        modelsApi.selectAll()
          .then(resp => {
            modelsList.value = resp.data;
            //显示添加框
            carsAddDialogShow.value = true
          });
      
      }
      //定义方法根据mid查询部门信息
      function selectByCid(cid) {
        modelsApi.selectAll()
          .then(resp => {
            modelsList.value = resp.data;
          });
        carsApi.selectByCid(cid)
          .then(resp => {
            carsUpdate.value = resp.data;
            //显示修改框
            carsUpdateDialogShow.value = true;
          });
      }
      //修改车辆的方法
      
      //定义方法完成部门修改
      function update() {
        console.log(carsUpdate.value.cid);
        console.log(id.value);
        console.log(days.value)
        
        
        //开启加载动画
        const loading = ElLoading.service({
          lock: true,
          text: '加载中',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        ordersApi.insert(carsUpdate.value.cid,days.value,id.value)
          .then(resp => {
            loading.close();//取消加载动画
            if (resp.code == 10000) {
              ElMessage({
                message: resp.msg,
                type: 'success',
                duration: 1200
              });
              //隐藏对话框
              carsUpdateDialogShow.value = false;
              //刷新表格数据
              selectByCplate(1);
            } else {
              ElMessage({
                message: resp.msg,
                type: 'error',
                duration: 2000,
              });
            }
          });
      }
      
      // //添加车辆的方法
      // function insert() {
      //   //开启加载动画
      //   const loading = ElLoading.service({
      //     lock: true,
      //     text: '加载中',
      //     background: 'rgba(0, 0, 0, 0.7)',
      //   })
      //   carsApi.insert(carsAdd.value)
      //     .then(resp => {
      //       loading.close();//取消加载动画
      //       if (resp.code == 10000) {
      //         ElMessage({
      //           message: resp.msg,
      //           type: 'success',
      //           duration: 1200
      //         });
      //         //隐藏对话框
      //         carsAddDialogShow.value = false;
      //         //清空对话框中的数据
      //         carsAdd.value = {
      //           mid: '',
      //           cplate: '',
      //           brand: '',
      //           Price: '',
      //           eavatar: ''
      //         }
      //         imageUrl.value = '';
      //         //刷新表格数据
      //         selectByCplate(1);
      //       } else {
      //         ElMessage({
      //           message: resp.msg,
      //           type: 'error',
      //           duration: 2000
      //         });
      //       }
      //     });
      // }
      //分页查询；  
      function selectByCplate(pageNum) {
        //获取id的值
        adminApi.longinfo().then(resp=>{id.value=resp.data.id});
        carsApi.selectByCplate(pageNum, cplate.value, cstate.value)
          .then(resp => {
            pageInfo.value = resp.data;
          });
      }
      //默认查询首页
      selectByCplate(1);
      </script>
      
      <style scoped>
      .avatar-uploader,
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
        border: 1px dotted #dcdfe6;
        border-radius: 5px;
      }
      
      .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
      }
      </style>